<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/videoWeb/layui-v2.5.7/layui/css/layui.css">
  <link rel="stylesheet" href="/videoWeb/element/element.css">
  <script src="/videoWeb/js/Jquery.js" ></script>
  <script src="/videoWeb/layui-v2.5.7/layui/layui.js"></script>
  <script src="/videoWeb/js/vue.js"></script>
  <script src="/videoWeb/element/element.js"></script>
  <title>个人中心-我的头像</title>
</head>

<style>

  #head{
    position: fixed;
    width:100%;
    top:0;
    z-index:100;
  }

  #app_div1{
    width: 70%;
    border: 1px solid rgb(225,226,229);
    margin: auto;
    margin-top: 15vh;
    display: flex;
  }

  #app_div1_div1{
    width: 55%;
    height:50vh;
    /* border: 1px red solid; */
  }

  #app_div1_div1_div1{
    width: 100%;
    height: 50px;
    /* border: 1px red solid; */
    display: flex;
    align-items: center;
    color: #00a1d6;
    font-size: 14px;
    font-weight: 600;
  }

  #app_div1_div1_div2{
    display: flex;
  }

  #app_div1_div1_div2_div2{
    width: 177px;
    height: 177px;
    border-left: 1px solid rgb(229,233,239);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 40px;
  }

  #app_div1_div1_div2_div2_div1{
    width: 100px;
    height: 100px;
    /* border: 1px solid red; */
    border-radius: 50%;
    overflow: hidden;
    display: inline-block;
  }

  #app_div1_div1_div3{
    width: 70%;
    height: 20%;
    /* border: 1px solid red; */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .str {
    width: 200px;
    height: 200px;
    border: solid 1px #e3e3e3;
    padding: 5px;
    margin-top: 10px
  }

  .login_tity{
    display: flex;
    width: 100%;
    height: 21vh;
    /* border: solid 1px black; */
    justify-content: center;
    align-items: center;
    font-size: 13px;
    color: #666666;
  }

  .links{
    /* border: solid 1px black; */
  }

  .links>a{
    text-decoration: none;
    margin: 10px;
    color: #666666;
  }

  .copyright{
    text-align: center;
    margin-top: 10px;
  }

</style>
<body>
<div id="app">
    <el-menu :default-active="activeIndex" class="el-menu-demo" id="head" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">
        <el-image style="width: 100px; height: 50px" :src="url" :fit="fit"></el-image>
      </el-menu-item>
      <el-menu-item index="1"><a href="/videoWeb/fronts/index.html"><i class="el-icon-s-home"></i>主页</a></el-menu-item>
      <el-menu-item index="2">实战课</el-menu-item>
      <el-menu-item index="3">体系课</el-menu-item>
      <el-menu-item index="4"><a href="" target="_blank">手记</a></el-menu-item>
      <el-menu-item >
        <el-input placeholder="请输入关键字" v-model="input" clearable style="width:250px"></el-input>
        <el-button size="medium" icon="el-icon-search"></el-button>
      </el-menu-item>

      <el-menu-item style="float: right;" v-if="code != 100">
        <a href="">注册</a>
        /
        <a href="login.html">登录</a>
      </el-menu-item>

      <el-submenu index="5" style="float: right;" v-if="code === 100">
        <template slot="title">
          <div class="demo-type" style="display:inline-block">
            <div>
              <el-avatar :src="imgSrc"></el-avatar>
            </div>
          </div>
        </template>
        <el-menu-item index="5-1" style="color:black;font-weight:700;text-align:center;">{{name}}</el-menu-item>
        <el-menu-item index="5-2">
          <a href="/videoWeb/fronts/myHead.html">
            <i class="el-icon-user"></i>
            个人中心
          </a>
        </el-menu-item>
        <el-menu-item index="5-3" @click="loginOut"><i class="el-icon-switch-button"></i>退出</el-menu-item>
      </el-submenu>

      <el-menu-item style="float: right;"><a href="/videoWeb/fronts/home.html">创作中心</a></el-menu-item>

    </el-menu>

  <div id="app_div1">
    <el-row class="tac" style="width:15%; background-color: rgb(48,65,86);">
      <el-col>
        <el-menu default-active="2"
                 class="el-menu-vertical-demo"
                 @open="handleOpen"
                 @close="handleClose"
                 style="height:100%; overflow-x:hidden;"
                 unique-opened
                 background-color="rgb(48,64,86)"
                 text-color="#fff"
                 active-text-color="#409EFF"
        >
          <a href="/videoWeb/fronts/index.html">
            <el-menu-item  index="1">
              <i class="el-icon-house"></i>主页
            </el-menu-item >
          </a>
          <a href="/videoWeb/fronts/myHead.html">
            <el-menu-item index="2">
                <span slot="title">
                   <i class="el-icon-s-custom"></i>
                   我的头像
                </span>
            </el-menu-item>
          </a>
          <a href="/videoWeb/fronts/myVideoStatisticsCount.html">
            <el-menu-item index="3">
                <i class="el-icon-s-data"></i>
                视频统计
            </el-menu-item>
          </a>
          <a href="/videoWeb/fronts/myVideo.html">
            <el-menu-item index="4">
              <i class="el-icon-video-camera-solid"></i>
              我的视频
            </el-menu-item>
          </a>
        </el-menu>
      </el-col>
    </el-row>

    <div id="app_div1_div1">
      <div id="app_div1_div1_div1">个人中心 ___ 我的头像</div>
      <div id="app_div1_div1_div2">
        <div>
          <el-upload class="avatar-uploader" action="/videoWeb/upFile"
                     :on-success="img_success"
                      :headers="headers">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <div id="app_div1_div1_div2_div2">
          <div id="app_div1_div1_div2_div2_div1">
            <img :src="headImg" style="width: 100%; height: 100%;">
          </div>
        </div>
      </div>
      <div id="app_div1_div1_div3">
        <el-button type="primary" @click="modifyAvatar">更新头像</el-button>
      </div>
    </div>

  </div>

  <div class="login_tity">
    <div class="links">
      <a href="">
        关于我们
      </a>
      |
      <a href="">
        联系我们
      </a>
      |
      <a href="">
        人才招聘
      </a>
      |
      <a href="">
        商家入驻
      </a>
      |
      <a href="">
        广告服务
      </a>
      |
      <a href="">
        手机蛇皮
      </a>
      |
      <a href="">
        友情链接
      </a>
      |
      <a href="">
        销售联盟
      </a>
      |
      <a href="">
        蛇皮社区
      </a>
      |
      <a href="">
        蛇皮公益
      </a>
      |
      <a href="">English Site</a>
      <div class="copyright">
        Copyright&nbsp;©&nbsp;2004-2021&nbsp;&nbsp;蛇皮SP.com&nbsp;版权所有
      </div>
    </div>

  </div>

</div>
</body>

<script>

    layui.use('layer',function(){
        var layer = layui.layer;
    })

    new Vue({
        el:'#app',
        data:{
            urls:['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
              ,'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
              ,'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
              ,'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'],
            url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            code:1,//登录状态
            name:"",//用户姓名
            imgSrc:"",//用户头像
            id:0,//用户id
            headImg:'',//上传文件图片
            headers:{
              'Authorization':localStorage.Authorization,
            },
        },
        mounted:function (){
           this.login();
        },
        methods:{
            isCollapse: true,
            login:function(){
                var that = this;
                $.ajax({
                    url:"/videoWeb/getUserMessageOfLogin",
                    headers:{
                      Authorization:localStorage.Authorization,
                    },
                    success:function(res){
                        if(res.code == 100){
                            that.code = res.code;
                            that.name = res.data.username;
                            that.imgSrc = res.data.headImg;
                            that.id = res.data.id;
                            that.headImg = res.data.headImg;
                        }
                        if(res.code == 401){
                            location.href="../../../../login";
                        }
                    }
                })
            },
            loginOut:function(){
                $.ajax({
                    url:"/videoWeb/loginOut",
                    headers:{
                      Authorization:localStorage.Authorization,
                    },
                    success:function(res){
                        location.href="../../../../login";
                    }
                })
            },
            img_success(res) {//图片上传成功后返回信息
                if(res.code == 100){
                    this.headImg = res.upFileMessage;
                    layer.msg(res.message,{icon:1});
                }else if(res.code == 104){
                    this.headImg = res.upFileMessage;
                    layer.msg(res.message,{icon:2});
                }
            },
            modifyAvatar:function (){
                this.imgSrc = this.headImg;
                $.ajax({
                    url:'/videoWeb/upDateHeadImg',
                    headers:{
                      Authorization:localStorage.Authorization,
                    },
                    data:{
                        headImg:this.imgSrc,
                        id:this.id,
                    },
                    success:function (res){
                        layer.msg("修改成功!",{icon:1});
                    }
                })
            },
        },
    })

</script>

</html>
